<template>
  <div>
    <div class="flex mt-52 items-center">
      <p class=" font-30 flex-1 textColor">{{ title }}</p>
      <!-- <div class="money-bag" v-if="isMoney">
        现货钱包
        <img src="@/assets/image/exchange/icon_4.png" alt="" class="w-25 h-25" />
      </div> -->
    </div>
    <div style="box-sizing: border-box"
      class="w-full rounded mt-22 px-20 flex items-center box-border py-20 inputBackground">
      <div class="flex border-r-gray border-white items-center" @click="onShowActionSheet">
        <img :src="`${HOST_URL}/symbol/${type == 1 ? coin.toLowerCase() : coin1.toLowerCase()}.png`" alt="logo"
          class="w-48 h-48 rounded-full mr-23" />
        <span class="font-30 mr-50 w-62 textColor">{{ type == 1 ? coin : coin1 }}</span>
        <img src="./icon-arrow.png" alt="logo" class="w-22 h-14" />
      </div>
      <div class="input-wrap flex justify-between flex-1 items-center ml-30">
        <input placeholder="" type="number" class="h-60 border-none inputBackground textColor" :value="value"
          @input="onInput" :disabled="disabled" />
      </div>
      <div v-if="showMax" class="text-blue pr-20" @click="onMax">{{ $t('最大') }}</div>
    </div>
    <div class="flex justify-between font-22 mt-15 text-grey">
      <p v-for="(tip, index) in tips" :key="index">{{ tip }}</p>
    </div>
    <!-- <van-action-sheet  v-model="show" :actions="actions" @select="onSelect" /> -->
    <van-popup v-model="show" position="bottom" class="mainBackground" :style="{ height: '80%' }">
      <div class="px-30 py-30 exchange-pop">
        <div class="tab-list flex">
          <div class="tab-item flex-1 textColor" :class="[activeIndex == 0 ? 'active' : '']" @click="checkActive(0)">
            <div class="mt-30">{{ $t('从') }}</div>
            <div class="flex items-center justify-center mt-20">
              <img :src="`${HOST_URL}/symbol/${coin.toLowerCase()}.png`" alt="logo"
                class="w-48 h-48 rounded-full mr-23" />

              {{ coin }}
            </div>
          </div>
          <div class="tab-item flex-1 textColor" :class="[activeIndex == 1 ? 'active' : '']" @click="checkActive(1)">
            <div class="mt-30">{{ $t('至') }}</div>
            <div class="flex items-center justify-center  mt-20">
              <img :src="`${HOST_URL}/symbol/${coin1.toLowerCase()}.png`" alt="logo"
                class="w-48 h-48 rounded-full mr-23" />
              {{ coin1 }}
            </div>
          </div>
        </div>
        <div class="title">{{ $t('闪兑至') }}</div>
        <div>
          <van-field v-model="searchValue" @input="searchFun" class="search-input" :placeholder="$t('搜索')"
            >
            <template slot="left-icon">
              <img src="@/assets/image/exchange/icon_5.png" alt="" class="w-40 h-40 mt-5" />
            </template>
          </van-field>
        </div>
        <div class="list mt-40">

          <div class="list-item flex mb-30" v-for="(item, index) in currencyList" :key="index" @click="onSelect(item)">
            <div class="flex-1 flex items-center">
              <div>
                <img :src="`${HOST_URL}/symbol/${item.symbol}.png`" alt="logo" class="w-70 h-70 rounded-full mr-23" />
              </div>
              <div>
                <div class="item-title textColor">{{ item.name }}</div>
              </div>
            </div>
            <div class="text-right" v-if="activeIndex == 0">
              <div class="item-title textColor">{{ item.usable }}</div>
              <div class="item-text">${{ item.usdt }}</div>
            </div>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { ActionSheet, Popup, Field } from "vant";
import { HOST_URL } from '@/config'
// import { mapGetters } from "vuex";
export default {
  name: "MiningExchangeInput",
  components: {
    [ActionSheet.name]: ActionSheet,
    [Popup.name]: Popup,
    [Field.name]: Field,
  },
  computed: {
    // ...mapGetters({coinList: 'home/coinList'}),
    // actions() { // 下拉列表
    //   const list = this.coinList.slice(0)
    //   list.map(item => {
    //     item.name = item.symbol.toUpperCase()
    //   })
    //   list.unshift({symbol: 'usdt', name: 'USDT'})
    //   return list
    // }
  },
  created() {

    this.currencyList = this.actions
    this.allCurrencyList = this.actions
  },
  props: {
    actions: {
      type: Array,
      default() {
        return []
      }
    },
    title: {
      type: String,
      default: "",
    },
    disabled: {
      type: Boolean,
      default: false
    },
    value: {
      type: [Number, String],
      default: 0,
    },
    getval: {
      type: String,
      default: ''
    },
    coin: {
      type: String,
      default: "ETH",
    },
    coin1: {
      type: String,
      default: "ETH",
    },
    showMax: {
      type: Boolean,
      default: true,
    },
    tips: {
      type: Array,
      default() {
        return [];
      },
    },
    type: {
      type: Number,
      default: 1,
    }
  },
  watch: {
    actions(val) {
      this.currencyList = val
      this.allCurrencyList = val
    }
  },
  data() {
    return {
      HOST_URL,
      show: false,
      searchValue: '',
      activeIndex: 0,
      currencyList: [],
      allCurrencyList: []
    };
  },
  methods: {
    onInput(e) { // 响应外层v-models
      this.$emit('input', e.target.value)
    },
    onMax() {
      this.$emit('max')
    },
    onShowActionSheet() {
      if (this.type == 1) {
        this.activeIndex = 0
      } else {
        this.activeIndex = 1
      }
      if (this.actions.length) {
        this.show = true;
      }
    },
    onSelect(e) { // 选中
      let obj = {
        item: e,
        type: this.activeIndex
      }
      this.searchValue = ''
      this.$emit('select', obj)
      this.currencyList = this.allCurrencyList
      this.show = false;
    },
    checkActive(val) {
      this.activeIndex = val
    },
    //搜索
    searchFun() {
      if (this.searchValue) {
        this.currencyList = this.allCurrencyList.filter((item) => {
          return item.symbol.toUpperCase().indexOf(this.searchValue.toUpperCase()) != -1
        })
      } else {
        this.currencyList = this.allCurrencyList
      }
    }
  },
};
</script>
<style lang="scss" scoped>
.input-wrap {
  border-left: 1px solid #3E4968;
  padding-left: 30px;
}

.van-action-sheet__item {
  @include themify() {
    background: themed("main_background");
  }

  @include themify() {
    color: themed("text_color");
  }
}



.money-bag {
  color: #818181;
}


.exchange-pop {
  .tab-list {
    @include themify() {
      background: themed("tab_background");
    }

    border-radius: 140px;
    height: 180px;
    color: #fff;

    .tab-item {
      text-align: center;
    }

    .active {
      @include themify() {
        background: themed("btn_background");
      }

      border-radius: 140px;
    }
  }

  .title {
    color: #fff;
    padding: 30px 0;
  }

  .search-input {
    color: #fff;

    @include themify() {
      background: themed("tab_background");
    }

    border-radius: 80px;
  }

  .list {
    color: #fff;

    .list-item {

      .item-title {
        font-size: 30px;
        font-weight: bold;
      }

      .item-text {
        color: #868D9A;
        font-size: 24px;
        margin-top: 5px;
      }
    }
  }
}

::v-deep .van-field__control {
  color: #747A8F;
}
</style>
